<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 王晓阳
  Date: 2024/4/18
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="webjars/layui/2.6.8/layui.js"></script>
    <link rel="stylesheet" href="webjars/layui/2.6.8/css/layui.css" media="all">
</head>
<body>
    <div class="layui-container">
        <table id="plotTable" lay-filter="plotTables"  class="layui-table layui-table-hover"></table>
        <%--详情--%>
        <div id="xiangqing" style="display:none;padding:20px">
            <table id="xiangqingTable" lay-filter="xiangqingTables"  class="layui-table layui-table-hover"></table>
        </div>
        <%--        报修--%>
        <div id="add" style="display:none;padding:20px">
            <form class="layui-form" id="addForm" lay-filter="addForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">维修位置:</label>
                    <div class="layui-input-block">
                        <input type="text" name="position" required  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">报修描述：</label>
                    <div class="layui-input-block">
                        <input type="text" name="repairtype" required  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">报修人:</label>
                    <div class="layui-input-block">
                        <input type="text" name="repairpeople" required  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联系电话:</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" required  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预约时间:</label>
                    <div class="layui-input-block">
                        <input type="text" name="hopetime" id="createtimeadd" style="display: none">
                        <input type="datetime-local" id="createtimeadds" step="1"  class="layui-input" placeholder="预约时间">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">报修类型:</label>
                    <div class="layui-input-block">
                        <select name="istype" id="">
                            <option value="1">居家维修</option>
                            <option value="2">公共维修</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">小区:</label>
                    <div class="layui-input-block">
                        <select name="plotid">
                            <option value="0">全部</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <%--上传证件--%>
    <div id="upload" style="display:none;padding:20px">
        <form class="layui-form" id="uploadForm" lay-filter="uploadForm">
            <input type="hidden" name="id"/> <%--存储id--%>
            <input type="hidden" name="attachpath" id="attachPath"/> <%--存储图片路径--%>
            <div class="layui-form-item">
                <label class="layui-form-label">上传证件:</label>
                <button type="button" class="layui-btn" id="attachImg">
                    <i class="layui-icon">&#xe67c;</i>选择图片
                </button>
                <%--<input type="file" name="files" value="">--%>
            </div>
            <%--            <div class="layui-form-item">--%>
            <%--                <label class="layui-form-label">证件描述:</label>--%>
            <%--                <div class="layui-input-block">--%>
            <%--                    <textarea name="attachDescr" class="layui-textarea"></textarea>--%>
            <%--                </div>--%>
            <%--            </div>--%>
        </form>
    </div>
    <%--头部工具栏，添加--%>
    <script type="text/html" id="headTool">
        <button class="layui-btn">我的任务</button>
    </script>
    <script>
        let $=layui.$
        //发送ajax请求去读小区
        $.get("/property/plot/show")
            .then(({data})=>{
                //data:数组
                $(data).each(function (i,e){
                    let option = $("<option value='"+e.id+"'>"+e.plotname+"</option>");
                    $("[name=plotid]").append(option);
                });
                //重新渲染下拉列表
                layui.form.render('select');
            });
        //渲染表格
        layui.use(function (){
            let table=layui.table;
            table.render({
                id:"one",
                elem:"#plotTable",
                page : true,
                limit : 5,
                limits : [5,10,15,20],
                method : "post",
                contentType : "application/json",
                url:"/Site/YuangongQuest/show",
                toolbar: "#headTool",
                cols:[[
                    {fixed: 'left',field:'number',width:60,align: 'center',type:'numbers',title:"编号"},
                    {field:'id',hide : true,align: 'center',title:"编号"},
                    {field:'siteproject',align: 'center',title:"巡检计划",templet(d){
                            return d.siteproject == null ? "sdfsdf" : d.siteproject.projectname;
                        }},
                    {field:'peopstartandend',align: 'center',title:"巡检开始/结束时间"},
                    {field:'realtime',align: 'center',title:"实际开始时间",templet(d){
                            return d.realtime == null ? "-" : d.realtime;
                        }},
                    {field:'endrealtime',align: 'center',title:"实际结束时间",templet(d){
                            return d.endrealtime == null ? "-" : d.endrealtime;
                        }},
                    // {field:'projectpeople',align: 'center',title:"计划巡检人",templet(d){
                    //         return d.user.username == null ? "-" : d.user.username;
                    //     }},
                    {field:'nowpeople',align: 'center',title:"巡检人",templet(d){
                            return d.user.username == null ? "-" : d.user.username;
                        }},
                    {field:'siteway',align: 'center',title:"巡检方式",templet(d){
                            return d.siteway == 1 ? "现场拍照" : "现场定位";
                        }},
                    {field:'sitetype',align: 'center',title:"巡检状态",templet(d){
                            return d.sitetype.typename == null ? "-" : d.sitetype.typename;
                        }},
                    {fixed: 'right', title:'操作',templet(d){
                            if (d.realtime == null && d.endrealtime == null){
                                return "<a class='layui-btn layui-btn-xs' lay-event='start' >开始</a>"+
                                    "<a class='layui-btn layui-btn-xs layui-bg-blue' lay-event='xiangqing'>详情</a>";
                            }else if (d.realtime != null && d.endrealtime == null){
                                return "<a class='layui-btn layui-btn-xs layui-btn-danger a' lay-event='end'>结束</a>"+
                                    "<a class='layui-btn layui-btn-xs layui-bg-blue' lay-event='xiangqing'>详情</a>";
                            }else if (d.realtime != null && d.endrealtime != null){
                                return "<a class='layui-btn layui-btn-xs layui-bg-blue' lay-event='xiangqing'>详情</a>";
                            }
                        }}
                ]]
            })
            //监听行工具栏事件
            table.on("tool(plotTables)",function (obj){
                console.log(obj.data)
                if(obj.event == "xiangqing"){
                    xiangqing(obj);
                }else if (obj.event == "start"){
                    start(obj.data.id);
                }else if (obj.event == "end"){
                    var b = confirm("是否需要报修");
                    if (b == true){
                        endbaoxiu(obj.data.id);
                    }else {
                        end(obj.data.id);
                    }
                }
            })
        })

        //开始巡查
        function start(id){
            // style="pointer-events:none;"    禁用
            // $(".a").removeAttr("style");
            $.post("/Site/YuangongQuest/updatetimetype?id="+id)
                .then(({msg})=>{
                    //关闭弹出层
                    layui.layer.close(layui.layer.index);
                    //弹出消息提示框
                    layui.layer.msg(msg);
                    //刷新表格
                    layui.table.reload('one');
                });
        }
        function endbaoxiu(id){
            //清一下数据
            $("#addForm")[0].reset();
            layui.layer.open({
                type:1,
                title:"添加",
                area:["500px","500px"],
                content:$("#add"),
                btn:["确定","取消"],
                yes(){
                    var replace = $("#createtimeadds").val().replace("T"," ");

                    $("#createtimeadd").val(replace);
                    //通过表单序列化，获取输入的内容
                    var addForm = layui.form.val("addForm");
                    $.post("/Site/YuangongQuest/addbaoxiu",addForm).then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    })
                    $.post("/Site/YuangongQuest/updatetimetypeEnd?id="+id).then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    });
                }
            })

        }
        function end(id){
            $.post("/Site/YuangongQuest/updatetimetypeEnd?id="+id).then(({msg})=>{
                //关闭弹出层
                layui.layer.close(layui.layer.index);
                //弹出消息提示框
                layui.layer.msg(msg);
                //刷新表格
                layui.table.reload('one');
            });
        }


        //详情
        function xiangqing(obj){
            // layui.table.reload('two');
            layui.layer.open({
                type : 1,
                title : "任务详情",
                area:["1000px","520px"],
                content: $("#xiangqing"),
                icon : 3,
            });
            //渲染表格巡查点
            layui.use(function (){
                let table=layui.table;
                table.render({
                    id:"two",
                    elem:"#xiangqingTable",
                    page : true,
                    url:"/Site/YuangongQuest/showxiangqing?id="+obj.data.id,
                    cols:[[
                        {fixed: 'left',field:'number',width:60,align: 'center',type:'numbers',title:"编号"},
                        {field:'id',align: 'center',hide : true,title:"编号"},
                        {field:'pointname',align: 'center',title:"巡检点名称"},
                        {field:'sitetype',align: 'center',title:"巡检类型",templet(d){
                                return d.sitetype == 2 ? "设备巡检" : "环境巡检";
                            }},
                        {field:'sitetypes',align: 'center',title:"巡检状态",templet(d){
                                return d.sitetypes.typename;
                            }},
                        {field:'startandend',align: 'center',title:"巡检点开始/结束时间",templet(d){
                                return d.startdata ==null ? "-" : d.startdata+ "~" + d.enddata;
                            }},
                        {field:'realsitetime',align: 'center',title:"实际巡检时间"},
                        {field:'note',align: 'center',title:"巡检情况"},
                        {field:'siteposition',align: 'center',title:"巡检位置"},
                        {field:'attachpath',align: 'center',title:"照片",templet(d) {
                                return d.attachpath == " " ? "-" : "<img src='/"+d.attachpath+"' width='40px'/>";
                            }},
                        {fixed: 'right', title:'操作', templet(d){
                                if (d.sitetypes.typename == '未开始'){
                                    if (d.realsitetime == " " ){
                                        return "<a class='layui-btn layui-btn-xs a' lay-event='start' >开始</a>";
                                    }
                                }else if (d.sitetypes.typename == '巡检中'){
                                    if (d.realsitetime != " " && d.attachpath == " "){
                                        return "<a class='layui-btn layui-btn-xs layui-btn-danger a' lay-event='end' >结束</a>";
                                    }
                                }else if (d.sitetypes.typename == '巡检结束'){
                                    if (d.realsitetime == " " ){
                                        return "<a class='layui-btn layui-btn-xs a' lay-event='start' >开始</a>";
                                    }else if (d.realsitetime != " " && d.attachpath == " "){
                                        return "<a class='layui-btn layui-btn-xs layui-btn-danger a' lay-event='end' >结束</a>";
                                    }else if (d.realsitetime != " " && d.attachpath!=" "){
                                        return "<a class='layui-btn layui-btn-xs a' lay-event='upload' >照片</a>";
                                    }
                                }else if (d.sitetypes.typename == '未巡检'){
                                    if (d.realsitetime == " " ){
                                        return "<a class='layui-btn layui-btn-xs a' lay-event='start' >重检</a>";
                                    }else if (d.realsitetime != " " && d.attachpath == " "){
                                        return "<a class='layui-btn layui-btn-xs layui-btn-danger a' lay-event='end' >结束</a>";
                                    }else if (d.realsitetime != " " && d.attachpath!=" "){
                                        return "<a class='layui-btn layui-btn-xs a' lay-event='upload' >照片</a>";
                                    }
                                }
                                else if (d.sitetypes.typename == '巡检中断'){
                                    if (d.realsitetime == ' ' ){
                                        return "<a class='layui-btn layui-btn-xs a' lay-event='start' >重检</a>";
                                    }else if (d.realsitetime != " " && d.attachpath == " "){
                                        return "<a class='layui-btn layui-btn-xs layui-btn-danger a' lay-event='end' >结束</a>";
                                    }else if (d.realsitetime != " " && d.attachpath!=" "){
                                        return "<a class='layui-btn layui-btn-xs a' lay-event='upload' >照片</a>";
                                    }
                                }
                            }}
                    ]]
                })
                //监听行工具栏事件
                table.on("tool(xiangqingTables)",function (obj){
                    if (obj.event == "start"){
                        startxiangqing(obj.data.id);
                    }else if (obj.event == "end"){
                        uploadsend(obj.data);
                    }else if(obj.event == "upload"){
                        uploads(obj.data);
                    }
                })
            })
        }
        //文件上传 + 结束时间
        function uploadsend(data){
            //数据回显，将证件描述和用户名回显
            layui.form.val("uploadForm",data);
            //弹出隐藏的窗口
            layui.layer.open({
                type : 1,
                title : "文件上传",
                content : $("#upload"),
                area : ["500px"],
                btn : ["确定","取消"],
                yes(){
                    //结束时间
                    $.post("/Site/YuangongQuest/updatetimetypexiangqingEnd?id="+data.id)
                        .then(({msg})=>{
                            //关闭弹出层
                            layui.layer.close(layui.layer.index);
                            //弹出消息提示框
                            layui.layer.msg(msg);
                            //刷新表格
                            layui.table.reload('two');
                        });

                    //文件上传
                    //1.获取文本框中输入的内容
                    let params = layui.form.val("uploadForm");
                    console.log(params)
                    $.post("/Site/YuangongQuestxiangqing/updatePath",params)
                        .then(({msg})=>{
                            layui.layer.close(layui.layer.index);
                            layui.layer.msg(msg);
                            layui.table.reload("two");
                        })
                }
            })
        }
        //文件上传
        function uploads(data){
            //数据回显，将证件描述和用户名回显
            layui.form.val("uploadForm",data);
            //弹出隐藏的窗口
            layui.layer.open({
                type : 1,
                title : "文件上传",
                content : $("#upload"),
                area : ["500px"],
                btn : ["确定","取消"],
                yes(){
                    //文件上传
                    //1.获取文本框中输入的内容
                    let params = layui.form.val("uploadForm");
                    console.log(params)
                    $.post("/Site/YuangongQuestxiangqing/updatePath",params)
                        .then(({msg})=>{
                            layui.layer.close(layui.layer.index);
                            layui.layer.msg(msg);
                            layui.table.reload("two");
                        })
                }
            })
        }
        //2.多文件上传
        var str = "";
        layui.upload.render({
            elem : "#attachImg",
            url : "/Site/YuangongQuestxiangqing/uploadMore",
            field : "attach",//文件域的名称 <input type='file' name='attach'/>
            accept : "images",
            multiple :true,
            done(res, index, upload){
                //从res中获取
                str += res.data.attachPath ;
                $("[name=attachpath]").val(str);
            }
        });

        //开始巡查
        function startxiangqing(id){
            $.post("/Site/YuangongQuest/updatetimetypexiangqingStart?id="+id)
                .then(({msg})=>{
                    //关闭弹出层
                    layui.layer.close(layui.layer.index);
                    //弹出消息提示框
                    layui.layer.msg(msg);
                    //刷新表格
                    layui.table.reload('two');
                });
        }
    </script>
</body>
</html>
